<template>
  <div class="content-in">
    <div class="banner">
      <img src="@/assets/images/contact/news.png" />
      <div class="banner-tx">
        <p class="ft48">NEWS CENTER</p>
        <p>新闻中心</p>
        <template v-if="lang === 'en'">
          <p class="ft24">
            We deliver more information about the company to you, so that you can have a more
            comprehensive understanding of the company you care about
          </p>
        </template>
        <template v-else>
          <p class="ft24">我们为您传递更多的企业信息，使您更加全方位的了解您所关注的企业</p>
        </template>
      </div>
    </div>
    <div class="main">
      <div class="news-navbar">
        <a
          v-for="item in navbars"
          :key="item.id"
          :class="{
            active: item.id === currentNarbar.id,
          }"
          @click="hanldeTabChange(item)"
        >
          {{ item[`name${capitalizeLang}`] }}
        </a>
      </div>
      <div class="news-scroll">
        <div v-for="item in list" :key="item.id" class="news-s-row">
          <img :src="item.coverImage" />
          <div class="news-s-flex">
            <h1>{{ item[`title${capitalizeLang}`] }}</h1>
            <p>{{ item[`subtitle${capitalizeLang}`] }}</p>
            <span>{{ item.createTime }}</span>
          </div>
          <div class="arrow-right"></div>
        </div>
        <span v-if="!list.length">暂无数据</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import * as api from '@/const/api'

export default {
  components: {},
  data() {
    return {
      navbars: [],
      currentNarbar: {},
      path: '',
      list: [],
    }
  },
  computed: {
    ...mapState(['lang']),
    ...mapGetters(['capitalizeLang']),
  },
  mounted() {
    this.goClassificationPage()
  },
  methods: {
    async goClassificationPage() {
      try {
        const { code, msg, data } = await this.$axios.$post(api.classificationPage, {
          type: 3,
        })

        if (+code !== 200) {
          throw new Error(msg)
        }

        this.navbars = data || []
        this.currentNarbar = data[0]
        this.goPage(data[0].id)
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    async goPage(id) {
      try {
        this.list = []
        // 获取分类下数据
        const { code, msg, data } = await this.$axios.$post(api.solutionPage, {
          classificationIds: [id],
          pageSize: 100,
          pageNo: 1,
        })
        if (+code !== 200) {
          throw new Error(msg)
        }
        this.list = data.list
      } catch (err) {
        this.$message.error(err.message)
      }
    },
    hanldeTabChange(row) {
      this.currentNarbar = row
      this.goPage(row.id)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.content-in {
  .banner {
    display: flex;
    position: relative;

    img {
      width: 100%;
    }

    .banner-tx {
      width: 100%;
      .pd(200, 0, 0, 0);
      .ft(36);

      position: absolute;
      font-weight: bold;
      color: #fff;
      text-align: center;

      .ft48 {
        .ft(48);

        color: #949596;
      }

      .ft24 {
        .ft(20);
        .lineH(28);
        .width(640);

        margin: 10px auto;
        text-align: center;
      }
    }
  }
}

.main {
  .width(1200);

  margin: 0 auto;

  .news-navbar {
    .pd(60, 0, 20, 0);

    border-bottom: 2px solid #ddd;

    a {
      .height(36);
      .lineH(36);
      .pd(0, 15, 0, 15);
      .mg(0, 15, 0, 0);
      .ft(16);

      display: inline-block;
      background: #fff;
      border-radius: 17px;
      color: #333;

      &.active {
        background: #0762cb;
        color: #fff;
      }
    }
  }

  .news-scroll {
    .pd(40, 0, 40, 0);
  }

  .news-s-row {
    display: flex;
    justify-content: space-between;
    .pd(26, 40, 26, 40);

    cursor: pointer;

    img {
      .width(280);

      display: block;
    }

    .news-s-flex {
      flex: 1;
      position: relative;
      .mg(0, 60, 0, 60);

      h1 {
        .ft(22);
        .height(54);

        color: #333;
      }

      p {
        .ft(16);
        .height(40);
        .mg(18, 0, 0, 0);
      }

      span {
        .ft(16);

        font-weight: 400;
        position: absolute;
        bottom: 0;
      }
    }

    .arrow-right {
      .width(36);
      .height(36);

      background: #efefef;
      border-radius: 50%;
      align-self: center;
      position: relative;

      &::before {
        .width(12);
        .height(12);
        .top(11);
        .left(9);

        content: '';
        display: block;
        position: absolute;
        transform: rotate(-135deg);
        border-left: 1px solid #cecece;
        border-bottom: 1px solid #cecece;
      }
    }

    &:hover {
      background: #f6f7f9;

      .arrow-right {
        background: #0762cb;

        &::before {
          border-left: 1px solid #fff;
          border-bottom: 1px solid #fff;
        }
      }
    }
  }
}
</style>
